<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/public/CSS/public.css">
    <style>
        body {
            margin: 5px 5px 0;
        }

        #searchBox {
            width: 350px;
            border: 1px solid #999;
            border-radius: 8px;
            display: flex;
            align-items: center;
            margin: 20px auto;
        }

        #textSearch {
            flex: 1;
            padding: 8px;
            border: none;
            outline: none;
            font-size: 16px;
        }

        #buttonSearch {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .musics ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .musics li {
            margin-bottom: 20px;
            border: 1px solid #999;
            border-radius: 8px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .musics li p {
            margin: 0;
            padding: 0;
        }

        .musics li img {
            width: 50px;
            height: 50px;
        }

        .play {
            background-color: #007bff;
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .musicsplayer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99;
        }

        .scrollinglyrics {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0;
            background-color: olive;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
        }

        .musicName {
            font-size: 18px;
            width: 50px;
            height: 50px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="searchBox">
        <input id="textSearch" placeholder="输入关键字" type="text" spellcheck="false" data-ms-editor="true">
        <input type="button" id="buttonSearch" value="搜索">
    </div>
    <div class="musics">
        <ul>

        </ul>
    </div>
    <div class="musicsplayer">
        <span id="musicName">弹出</span>
    </div>
    <div class="scrollinglyrics"></div>
</body>
<script src="/public/JS/jquery-3.7.0.min.js"></script>
<script>
    $.ajax({
        url: 'https://api.gumengya.com/Api/MusicList',
        type: 'post',
        dataType: 'json',
        async: false,
        data: {
            format: 'json',
            url: 'https://y.qq.com/n/yqq/playlist/2882976222.html',
        },
        beforeSend: function () {
            //请求中执行的代码
        },
        complete: function () {
            //请求完成执行的代码
        },
        error: function () {
            //请求成功失败执行的代码
        },
        success: function (res) {
            // 状态码 200 表示请求成功
            if (res.code == 200) {
                for (let i = 0; i < res.data.length; i++) {
                    let musicHtml = `
                    <li>
                <p><img src="${res.data[i].cover}"></p>
                <p><span>${res.data[i].artist}</span></p>
                <p><span>${res.data[i].name}</span></p>
                <p><span id=" ${res.data[i].url}" class="play">播放</span></p>
            </li>
                    `
                    $('.musics ul').append(musicHtml)
                }
                $('.play').click(function () {
                    $('.musicsplayer').animate({
                        height: '50px'
                    }, 500)
                    let url = $(this).attr('id')
                    let audio = new Audio(url)
                    audio.play()
                    // 设置定时器,当音乐播放完毕后,清除定时器,并设置当前歌曲的下一首歌曲的播放
                    let timer = setTimeout(() => {
                        clearTimeout(timer)
                        let nextMusic = $(this).next()
                        if (nextMusic.length > 0) {
                            let nextUrl = nextMusic.find('a').attr('href')
                            audio.src = nextUrl
                            audio.play()
                        }
                    }, audio.duration * 1000)
                    // 点击播放按钮,暂停当前歌曲,并设置定时器,当音乐播放完毕后,清除定时器,并设置当前歌曲的下一首歌曲的播放
                    $(this).click(function () {
                        audio.pause()
                        clearTimeout(timer)
                        let nextMusic = $(this).next()
                        if (nextMusic.length > 0) {
                            let nextUrl = nextMusic.find('a').attr('href')
                            audio.src = nextUrl
                            audio.play()
                        }
                    })
                    $('#musicName').click(function () {
                        $('.scrollinglyrics').animate({
                            height: '100%'
                        }, 500)
                        $.get('https://api.gumengya.com/Api/MusicList?id=00394z9S2ciPAD&action=lrc&site=tencent', function (data) {
                            console.log(data);
                        })
                        $('.scrollinglyrics').text(res.data[0].lrc)
                    })
                })
            } else {
                console.log(res)
            }
        }
    })
</script>

</html>